<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
             :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item label="业主姓名" prop="name">
        <el-input v-model="dataForm.name" placeholder="业主姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="dataForm.idcard" placeholder="身份证号" @blur="getBirthday"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <ren-radio-group v-model="dataForm.sex" dict-type="gender"></ren-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
              v-model="dataForm.birthday"
              type="date"
              value-format="yyyy-MM-dd hh:mm:ss"
              placeholder="生日">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="联系方式" prop="tel">
        <el-input v-model="dataForm.tel" placeholder="联系方式"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="dataForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password">
        <el-input type="password" v-model="conpassword" placeholder="确认密码" @blur="this.VerifyPassword"></el-input>
      </el-form-item>
      <el-form-item label="改表人" prop="updator">
        <el-input v-model="dataForm.updator" placeholder="改表人"></el-input>
      </el-form-item>
      <el-form-item label="选择房间">
        <el-cascader style="width: 347px" v-model="cascader" :options="options" :key="updateVal" :props="props"
                     @change="getId()"
                     clearable></el-cascader>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="closeWindow()">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data() {
    return {
      props: {
        label: "label",
        value: "value",
        children: "children",
      },
      updateVal: 0,
      cascader: [],
      options: [],
      visible: false,
      conpassword: '',
      dataForm: {
        id: '',
        name: '',
        idcard: '',
        sex: '',
        birthday: '',
        tel: '',
        password: '',
        creator: '',
        createTime: '',
        updator: '',
        updateTime: '',
        houseId: '',
        villageId: '',
        buildingId: ''
      }
    }
  },
  computed: {
    dataRule() {
      return {
        name: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        idcard: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        sex: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        birthday: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        tel: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        password: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        createTime: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        updator: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        updateTime: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        houseId: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        villageId: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        buildingId: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getAllcascade()

  },
  methods: {
    getBirthday() {
      // birthday:"2022-12-25 12:00:00"

      var SIdCard = String(this.dataForm.idcard)
      if (SIdCard.length != 18) {
        alert("身份证号有错误，请校验修改")
      } else {
        var year = SIdCard.substring(6, 10)

        var month = SIdCard.substring(10, 12)
        console.log(month)
        var day = SIdCard.substring(12, 14)
        console.log(day)
      }

    },
    closeWindow() {
      this.visible = false
      this.cascader = []
    },
    getId() {
      this.dataForm.villageId = this.cascader[0]
      this.dataForm.buildingId = this.cascader[1]
      this.dataForm.houseId = this.cascader[2]
    },
    VerifyPassword() {
      if (this.dataForm.password != this.conpassword) {
        alert("两次输入密码不一致")
      }
    },
    //查询所有级联菜单
    getAllcascade() {
      this.$http.get(`/eightapp/eiownerinfo/getCascade`).then(({data: res}) => {
        this.options = res.data.cascadeFirstDTOList

      }).catch(() => {
      })
    },
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        console.log(this.dataForm.id)
        if (this.dataForm.id != null) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/eightapp/eiownerinfo/${this.dataForm.id}`).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        console.log(res.data)
        res.data.password = ''
        this.dataForm = res.data
        this.cascader.push(res.data.villageId)
        this.cascader.push(res.data.buildingId)
        this.cascader.push(res.data.houseId)


        // this.updateVal = this.$getSessionStorage("key")
        this.updateVal++;
        // this.$setSessionStorage("key", this.updateVal);
        // var c = this.$getSessionStorage("key");
        // console.log(c)

        // this.dataForm = {
        //   ...this.dataForm,
        //   ...res.data
        // }
      }).catch(() => {
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }

        this.$http[!this.dataForm.id ? 'post' : 'put']('/eightapp/eiownerinfo/', this.dataForm).then(({data: res}) => {
          console.log()
          this.conpassword = '';
          this.cascader = '';
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {
        })
      })
    }, 1000, {'leading': true, 'trailing': false})
  }
}
</script>
